@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

.wf-bottomOperate-wrap {
  width: 100%;
  background: #F8F8F8;
  position: relative;
  .footer-reply-input {
    .reply-div {
      .wm-reply-wrap {
        .wm-reply-panel {
          height: unset !important;
        }
      }
    }
  }
  .wf-signView-panel {
    position: absolute;
    z-index: 100;
    width: 100%;
    background: #eee;
    text-align: left;
    .wf-signView-panel-mask {
      background: rgba(0, 0, 0, .3);
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 99;
      left: 0;
      top: -100vh;
    }
    .wf-signView-panel-content {
      padding: 0* @hd 10*@hd;
      .am-checkbox-item{
        padding-left: 0px !important;
      }
      .sign-panel-title {
        text-align: center;
        height: 44 * @hd;
        line-height: 44 * @hd;
        .sign-userInfo {
          position: absolute;
          left: 15 * @hd;
          top: 7px;
          .more-user-selected {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
          }
          .more-user {
            display: inline-block;
            width: 30 * @hd;
            height: 30 * @hd;
            background: #999;
            border-radius: 50%;
            color: #fff;
            position: absolute;
          }
        }
        .sign-phrase-title {
          display: inline-flex;
          .span-title {
            height: 20 * @hd;
            line-height: 20 * @hd;
            padding-right: 15 * @hd;
            font-size: 17 * @hd;
            color: #333;
          }
          .am-icon-md {
            width: 20 * @hd;
            height: 20 * @hd;
          }
        }
        .more-setting-btn {
          top: 8 * @hd;
          line-height: 0 !important;
        }
      }
      .sign-panel-setting{
        border: 1px solid #ccc;
        background-color: #FFF;
        margin-bottom: 6 * @hd;
      
        .wf-forward-remind-type {
          border-bottom: 1px solid #ccc;
        }
        .wf-forward-remind-type:last-child {
          border: none;
        }
        
      }
     
      .remark_list_dom{
        background: #F0F8FF;
        border: 1px solid #ccc;
        border-bottom: 0px;
        .container_form_wrap{
          padding: 5px;

          .container_form_wrap_span{
            overflow: hidden;
            padding-right: 25 * @hd;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .remark-quote{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-right: 25 * @hd;
          }
        }
      }
      .sign-action-btns {
        padding: 9 * @hd  0 8 * @hd  0;
        .sign-action-list {
          width: 100%;
          height: 100%;
          overflow: inherit;
          .sign-icon-item {
            text-align: center;
            color: #888;
            position: relative;

            .wm-upload-img{
              .am-image-picker-list{
                margin-bottom: 0;
              }
            }
            
            .am-icon-md {
              width: 24 * @hd;
              height: 24 * @hd;
            }

            .sign-icon-item-dot{
                display: block;
                position: absolute;
                width: 8 * @hd;
                height: 8 * @hd;
                background: #ED6F69;
                border: 1 * @hd  solid #FFFFFF;
                border-radius: 50%;
                left: 16 * @hd;
                top: 0px;
            }
          }
        }

      }
      .sign-panel-main {
        position: relative;
        border: 1 * @hd  solid #ccc;
        background: #FFF;

        .am-rich-editor {
          .ql-container {
            height: 160 * @hd;
            border: 0px;
          }
          .ql-toolbar {
            border: 0px;
            border-bottom: 1 * @hd  solid #ccc;
          }
        }

        .sign-position-info {
          width: 100%;
          background: #FFF;
          display: flex;
          height: 40 * @hd;
          line-height: 40 * @hd;
          .position-show {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            padding-left: 10 * @hd;
            .am-icon {
              display: inline-block;
              vertical-align: middle;
            }
            .am-button {
              line-height: 28 * @hd;
              .am-icon {
                margin-right: 5 * @hd;
              }
              span {
                display: inline-block;
                vertical-align: middle;
              }
            }
            .position-detail {
              display: inline-block;
              vertical-align: middle;
              width: auto;
              max-width: 80%;
              white-space: nowrap;
              overflow-x: hidden;
              text-overflow: ellipsis;
              color: #55B1F9;
            }
          }
          .delete-position {
            position: absolute;
            bottom: 30 * @hd;
          }

          .sign-attachment-info {
            width: 60 * @hd;
            .sign-attachment-info_dt {
              display: inline-block;
              vertical-align: middle;
              position: relative;
              .am-icon {
                margin-left: 7 * @hd;
                margin-top: 7 * @hd;
                width: 16 * @hd;
                height: 16 * @hd;
              }
              width: 30 * @hd;
              height: 30 * @hd;
              background-image: linear-gradient(-90deg, #56BACE 18%, #76D29F 92%);
              border-radius: 50%;
              color: #FFF;

              .sign-attachment-dot {
                display: block;
                position: absolute;
                width: 8 * @hd;
                height: 8 * @hd;
                background: #ED6F69;
                border: 1 * @hd  solid #FFFFFF;
                border-radius: 50%;
                top: 2 * @hd;
                right: -5 * @hd;
              }
            }
          }
        }

      }

      .sign-panel-richtext>div{
        height: 120 * @hd;
        overflow-y: auto;
        margin: 0px 5px;
      }

      .sign-overtimetak {
        // margin-bottom: 10 * @hd;
        // border: 1 * @hd solid #ccc;

        .sign-overtimetak-datepicker {
          .am-list-item-middle {
            padding-left: 0 !important;
            .am-list-line {
              padding-right: 0 !important;
              .am-list-extra {
                text-align: left;
              }
              .am-list-arrow {
                position: absolute !important;
                right: 0 !important;
              }
            }
          }
        }
      }

    }
    .sign-panel-bottom {
      border-top: 1 * @hd  solid #ccc;
      .sign-bottom-container {
        height: 44 * @hd;
        background: #F8F8F8;
        .sign-bottom-item {
          text-align: center;
          .pointer {
            display: inline-block;
            vertical-align: middle;
            height: 20 * @hd;
          }
          height: 30 * @hd;
          line-height: 30 * @hd;
          border-right: 1 * @hd  solid #DDD;
        }
        .wf-bottomOperate-split {
          float: right;
          .wf-bottomOperate-split-line {
            width: 2 * @hd;
            height: 20 * @hd;
            background-color: #DCDCDC;
            margin: auto;
          }
        }
      }
    }
    .sign-sound-input {
      height: 220 * @hd;
      border-top: 1 * @hd  solid #DCDCDC;
      position: relative;
      .sound-input-container {
        height: 100%;
        padding: 15 * @hd  0;
        font-size: 16 * @hd;
        color: #666;
        .sound-area {
          width: 100 * @hd;
          height: 100 * @hd;
          background: #55B1F9;
          line-height: 140 * @hd;
          text-align: center;
          border-radius: 50%;
          color: #FFF;
          .am-icon {
            width: 50%;
            height: 50%;
          }
        }
      }
      .goBack {
        position: absolute;
        right: 15 * @hd;
        bottom: 10%;
        color: #868686;
        .am-icon {
          width: 30 * @hd;
          height: 30 * @hd;
        }
      }
    }

    .wf-sign-img-list {
      background: #FFF;
      border-top: 1 * @hd  solid #DDD;
      padding: 5 * @hd;
      max-height: 150 * @hd;
      overflow: auto;
    }
    .wf-sign-input-more-info {
      border-top: 1 * @hd  solid #DDD;
      padding-bottom: 20 * @hd;
      background: #FFF;
      display: block;
      width: 100%;

      .more-info-row {
        display: flex;
        margin-top: 15 * @hd;
        .more-info-col {
          display: block;
          width: 25%;
          text-align: center;
          .wf-Signature{
            height:60px;
            background: none;
            div{
              height:100%;
            }
          }
          .item-icon {
            margin: 0 auto;
            width: 40 * @hd;
            height: 40 * @hd;
            color: #FFF;
            border-radius: 4 * @hd;
            margin-bottom: 6 * @hd;
            position: relative;
            .am-icon-md {
              position: relative;
              top: 10 * @hd;
            }

            .item-dot {
              display: block;
              position: absolute;
              width: 8 * @hd;
              height: 8 * @hd;
              background: #ED6F69;
              border: 1 * @hd  solid #FFFFFF;
              border-radius: 50%;
              left: 33 * @hd;
              top: -1 * @hd;
            }
            .wm-upload{
              height:100%;
              .am-file-picker{
                height:100%;
                .am-file-picker-custom-upload-btn{
                  height:100%;
                  input{
                    height:100%;
                  }
                }
              }
            }
          }
          .postil-icon {
            background: #E87E58;
          }

          .sign-icon {
            background: #78D296;
          }

          .flow-icon {
            background: #61A8F5;
          }

          .file-icon {
            background: #F3B04C;
          }

          .speech-icon {
            background: #61A8F5;
          }

          .location-icon {
            background: #F3B04C;
          }

          .annex-icon {
            background: #61A8F5;
            .am-file-picker-note {
              display: none;
            }
          }

          .item-title {
            font-size: 14 * @hd;
            color: #333;
            letter-spacing: -0.34 * @hd;
          }
        }
      }
    }
  }

  .wf-bottomOperate-container {
    width: 100%;
    height: 44 * @hd;
    line-height: 44 * @hd;
    font-size: 14 * @hd;
    color: #333;
    .sign-bottom-item {
      text-align: center;

      .am-icon {
        padding-top: 6 * @hd;
      }
    }
    .sign-bottom-right-border {
      height: 30 * @hd;
      line-height: 30 * @hd;
      border-right: 1 * @hd  solid #DDD;

      .item-showname {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
      }
    }
    .sign-bottom-item::after {
      display: inline-block;
      vertical-align: middle;
    }
    .wf-bottomOperate-split {
      float: right;
      .wf-bottomOperate-split-line {
        width: 1 * @hd;
        height: 20 * @hd;
        background-color: #DDD;
        margin: auto;
      }
    }
    .btn-disabled{
      color:#C1C1C1;
    }
  }
}

.wf-sign-sound-input {
  .wf-sign-sound-input-content {
    margin-top: 35 * @hd;
    .am-icon-md {
      height: 52 * @hd;
      width: 52 * @hd;
    }
  }
  .wf-sign-sound-input-tip {
    color: #333;
  }
}

.wf-sign-form-annotation-list {
  padding: 10 * @hd ;
  .wf-sign-annotation-row {
    margin-bottom: 5 * @hd ;
    .wf-sign-annotation-col {
      .wf-sign-annotation-item {
        width: 100%;
        height: 120 * @hd ;
      }
      .wf-sign-annotation-item-img {
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }

        .wf-sign-annotation-item-img-del{
          position: absolute;
          top: 0 * @hd ;
          right: -2 * @hd ;
          color: #999;
          .am-icon-md {
            width: 20 * @hd ;
            height: 20 * @hd ;
          }
        }
      }
      .wf-sign-annotation-item-btn {
        text-align: center;
        border: 1 * @hd  solid #ddd;
        .am-icon-md {
          width: 30 * @hd ;
          height: 30 * @hd ;
          margin-top: 40 * @hd ;
          color: #999;
        }

      }
    }

  }

}


.wf-sign-annex-list {
  height: 100%;
  padding-top: 50 * @hd ;
  padding-bottom: 40 * @hd ;
  box-sizing: border-box;
  .annex-upload {
    text-align: center;
    border-bottom: 1 * @hd  solid #BCBBC1;
    margin-top: -50 * @hd ;

    .am-file-picker-note {
      display: none;
    }
    .annex-upload-btn {
      color: #55B1F9;
      //height: 50 * @hd ;
      margin: 20* @hd 0;
      //line-height: 50 * @hd ;
      display: inline-block;
      font-size: 14 * @hd ;
      .am-icon-md {
        position: relative;
        top: 3 * @hd ;
        width: 18 * @hd ;
        height: 18 * @hd ;
        margin-right: 5 * @hd ;
      }
    }
  }
  .annex-data-list {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100%;

    .annex-row {
      min-height: 60 * @hd ;
      border-bottom: 1 * @hd  solid #BCBBC1;
      margin: 0 * @hd  10 * @hd ;
      font-size: 14 * @hd ;
      .col-icon {
        color: #FF3B30;
        margin: 0 * @hd  11 * @hd ;
      }

      .col-info {
        .file-name {
          color: #333;
          line-height: 20 * @hd ;
          word-break: break-word;
        }
        .file-size {
          color: #868686;
          line-height: 20 * @hd ;
          height: 20 * @hd ;
        }
      }
    }
  }
}

.wf-sign-sound-list {
  height: 100%;
  padding-top: 50 * @hd ;
  padding-bottom: 40 * @hd ;
  box-sizing: border-box;

  .add-sign-input {
    text-align: center;
    border-bottom: 1 * @hd  solid #BCBBC1;
    margin-top: -50 * @hd ;

    .sign-input-btn {
      color: #55B1F9;
      height: 50 * @hd ;
      line-height: 50 * @hd ;
      font-size: 14 * @hd ;
      .am-icon-md {
        position: relative;
        top: 3 * @hd ;
        width: 18 * @hd ;
        height: 18 * @hd ;
        margin-right: 5 * @hd ;
      }
    }
  }

  .annex-data-list {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100%;
    .annex-row {
      height: 60 * @hd ;
      border-bottom: 1 * @hd  solid #BCBBC1;
      margin: 0 * @hd  10 * @hd ;
      font-size: 14 * @hd ;
      .col-icon {
        color: #FF3B30;
        margin: 0 * @hd  11 * @hd ;
      }

      .col-info{
        width: 100%;
      }
    }
  }
}

.wf-voice-playback{
  background: #F7F7F7;
  border-radius: 4px;
  height: 35px;
  margin-bottom: 3px;
  .wf-audio-controll{
    height: 100%;

    .wf-audio-play{
      margin-right: 10 * @hd;
      margin-left: 10 * @hd;
      .am-icon-md{
        color: #333;
        width: 16 * @hd;
        height: 16 * @hd;
        margin-top: 5px;
      }
    }
    .wf-audio-img{
      margin-right: 10 * @hd;
      .am-icon-md{
        color: #333;
        width: 30 * @hd;
        height: 21 * @hd;
        margin-top: 5px;
      }

      img{
        width: 30px;
        margin-top: 5px;
      }
    }
    .wf-audio-time{
      position: absolute;
      right: 30 * @hd;
    }
  }
}
.wf-rightbtn-disabled{
  color:#C1C1C1;
}